<template>
	<view class="bg">
		<ttBar leftIcon="icon-back" title="申请退款"></ttBar>
		<view class="list">
			<view class="row">
				<text class="label">退款金额：</text>
				<text class="price">￥</text>
				<input class="price" type="number" v-model="userPrice" />
			</view>
			<view class="row">
				<text class="label">退款原因：</text>
				<text class="reason" @tap="showBox">{{selectIndex==null?'请选择':reasonList[selectIndex]}}</text>
				<text class="iconfont icon-right"  @tap="showBox"></text>
			</view>
			<view class="row dtBox">
				<text class="label">退款说明：</text>
				<textarea class="refoundDs" placeholder="请填写退款说明" v-model="reason"></textarea>
			</view>
		</view>
		<view class="reasonMask" v-if="showReason" @tap="close">
			<view class="reasonBox">
				<text class="title">退款原因</text>
				<view class="reasonList">
					<view class="row" v-for="(item,index) in reasonList" :key="index" @tap="selectReason(index)">
						<text>{{item}}</text>
						<text class="iconfont" :class="[index==selectIndex?'icon-yuanxingxuanzhongfill':'icon-yuanxingweixuanzhong']"></text>
					</view>
				</view>
				<text class="btn" @tap="close">关闭</text>
			</view>
		</view>
		<view class="btmOp">
			<button :disabled="isDis" @tap="apply">申请退款</button>
		</view>
	</view>
</template>

<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	export default {
		components: {
			ttBar
		},
		data() {
			return {
				price: 0,
				reasonList: ['不喜欢该课程', '课程效果未达到预期', '距离远，不想去', '多拍/错拍', '因个人原因无法继续上课','因商家原因无法上课','商家推荐了其他课程','其他'],
				selectIndex: null,
				showReason:false,
				isDis:false,
				orderInfo:null,
				reason:'',
				orderId:0,
				userPrice:0
			};
		},
		methods: {
			getData() {
				this.$store.dispatch("apiGetRefoundPrice",this.orderId)
					.then(res => {
						this.price = res.data.data
						this.userPrice=res.data.data
					})
			},
			selectReason(e){
				this.selectIndex=parseInt(e);
				this.showReason=false;
			},
			showBox(){
				this.showReason=true;
			},
			close(){
				this.showReason=false;
			},
			apply(){
				let moneyRex=/((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/;
				this.userPrice=parseFloat(this.userPrice.toString().tailCut())
				if(!this.userPrice){
					uni.showToast({
						title: '请输入退款金额',
						icon: 'none'
					});
				}else if(!moneyRex.test(this.userPrice)){
					uni.showToast({
						title: '请输入合法的退款金额',
						icon: 'none'
					});
				}else if(this.userPrice>this.price){
					uni.showToast({
						title: '申请退款金额不能超出上限',
						icon: 'none'
					});
				}else if(this.selectIndex==null){
					uni.showToast({
						title: '请选择退款原因',
						icon: 'none'
					});
				}else{
					let postData={
						orderId:parseInt(this.orderInfo.orderId),
						amount:this.userPrice,
						operId:this.orderInfo.orperId,
						status:1,
						reason:this.reason,
						type:parseInt(this.selectIndex)+1
					}
					this.isDis=true;
					this.$store.dispatch("apiApplyRefound",postData)
					.then(res=>{
						uni.showToast({
							title: '提交退款成功',
							icon: 'none'
						});
						uni.$emit("shuxingOrder")
						uni.redirectTo({
							url:'../refoundDt/refoundDt?oid='+this.orderInfo.orderId+'&rid='+res.data.refundId
						})
					})
				}
				
			}
		},
		onLoad(cfm) {
			this.orderInfo=cfm;
			this.orderId=cfm.orderId;
			this.getData();
		},
		// 下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.getData();
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
	}
	.bg{
		display: flex;
		flex-direction: column;
		background-color: #f6f6f6;
	}
	.list {
		display: flex;
		flex-direction: column;
		padding: 18upx;

		.row {
			width: 100%;
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
			box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
			border-radius: 10upx;
			padding: 58upx 30upx;
			margin-bottom: 14upx;

			.label {
				font-size: 32upx;
				color: #202932;
			}

			.price {
				font-size: 32upx;
				font-weight: bold;
				color: #ff2020;
			}

			.reason {
				color: #9e9d9d;
				font-size: 32upx;
				flex-grow: 1;
				text-align: right;
			}

			.iconfont {
				font-size: 36upx;
				color: #9e9d9d;
			}
			input{
				height: 32upx;
			}
		}

		.dtBox {
			flex-direction: column;
			padding-top: 26upx;
			padding-bottom: 100upx;

			text {
				width: 100%;
				margin-bottom: 26upx;
				text-align: left;
			}

			textarea {
				border-radius: 8rpx;
				border: solid 1rpx #e9e9e9;
				width: 100%;
				padding: 20upx;
				box-sizing: border-box;
				font-size: 28upx;
			}
		}
	}

	.reasonMask {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 99999999;
		top: 0;
		left: 0;

		.reasonBox {
			position: absolute;
			width: 100%;
			bottom: 0;
			right: 0;
			display: flex;
			flex-direction: column;
			background-color: #FFFFFF;

			.title {
				font-weight: bold;
				font-size: 36upx;
				color: #222433;
				padding: 48upx 0;
				text-align: center;
			}
			.reasonList{
				display: flex;
				flex-direction: column;
				.row{
					width: 100%;
					display: flex;
					padding: 28upx;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #ededed;
					text{
						font-size: 32upx;
						color: #222433;
					}
					.iconfont{
						font-size: 40upx;
						color: #c5c5c5;
					}
					.icon-yuanxingxuanzhongfill{
						color: #ffd34c;
					}
				}
				.row:last-child{
					border-bottom: none;
				}
			}
		}
		.btn{
			background-color: #ffb423;
			text-align: center;
			color: #FFFFFF;
			font-size: 32upx;
			padding: 50upx 0;
		}
	}
	.btmOp{
		position: fixed;
		width: 100%;
		height: 130upx;
		background-color: #FFFFFF;
		bottom: 0;
		right: 0;
		display: flex;
		align-items: center;
		padding: 0 130upx;
		button{
			height: 76rpx;
			background-color: #ffb423;
			border-radius: 38rpx;
			line-height: 76rpx;
			color: #FFFFFF;
			border: none;
			margin: 0;
			flex: 1;
			font-size: 32upx;
		}
		button:after{
			border: none;
			outline: none;
		}
	}
</style>
